<template>
  <el-container class="home_container">
    <el-header class="home_header" >
      <div class="home_title">宿舍管理系统-系统管理员</div>
      <div class="home_userinfoContainer">
        <el-dropdown>
          <span class="el-dropdown-link home_userinfo">
            {{admin.sname}}<i class="el-icon-arrow-down el-icon--right home_userinfo"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-header>

    <el-container style="background-color: #c8cfe2">
      <el-aside class="home-aside" width="200px" >
        <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;position: absolute;left: 0;">
          <el-radio-button :label="false">展开</el-radio-button>
          <el-radio-button :label="true">收起</el-radio-button>
        </el-radio-group>
        <el-menu router default-active="1-4-1" class="el-menu-vertical-demo" style="background-color: #c8cfe2;top: 120px;position: fixed" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span slot="title">宿管模块</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/dormitoryAdminAdd" :class="$route.path=='/dormitoryAdminAdd'?'is-active':''">添加宿管</el-menu-item>
              <el-menu-item index="/dormitoryAdminManager" :class="$route.path=='/dormitoryAdminManager'?'is-active':''">宿管管理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span slot="title">学生模块</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/studentAdd" :class="$route.path=='/studentAdd'?'is-active':''">添加学生</el-menu-item>
              <el-menu-item index="/studentManager" :class="$route.path=='/studentManager'?'is-active':''">学生管理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-document"></i>
              <span slot="title">楼宇模块</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/buildingAdd" :class="$route.path=='/buildingAdd'?'is-active':''">添加楼宇</el-menu-item>
              <el-menu-item index="buildingManager" :class="$route.path=='/buildingManager'?'is-active':''">楼宇管理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-place"></i>
              <span slot="title">宿舍模块</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/dormitoryAdd" :class="$route.path=='/dormitoryAdd'?'is-active':''">添加宿舍</el-menu-item>
              <el-menu-item index="dormitoryManager" :class="$route.path=='/dormitoryManager'?'is-active':''">宿舍管理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-menu-item index="/moveoutRegister" :class="$route.path=='/moveoutRegister'?'is-active':''">
            <i class="el-icon-position"></i>
            <span slot="title">学生迁出登记</span>
          </el-menu-item>
          <el-menu-item index="/moveRecord" :class="$route.path=='/moveRecord'?'is-active':''">
            <i class="el-icon-aim"></i>
            <span slot="title">学生迁出记录</span>
          </el-menu-item>
          <el-menu-item index="/absentRecord" class="$route.path=='/absentRecord'?'is-active':''">
            <i class="el-icon-search"></i>
            <span slot="title">学生缺寝记录</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <el-container>
        <el-main>
          <el-breadcrumb separator-class="el-icon-arrow-right" separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item v-text="this.$router.currentRoute.name"></el-breadcrumb-item>
          </el-breadcrumb>

          <router-view></router-view>
        </el-main>

        <el-footer class="home-footer" style="background-color: #c8cfe2;">2022 @LHY</el-footer>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: "SystemAdmin",
  methods: {
    logout() {
      let _this = this;
      this.$confirm('注销登陆吗?', '提示', {
        confirmButtonText: "确定",
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        localStorage.removeItem('systemAdmin')
        _this.$router.replace({path: '/'})
      })
    },
    handleOpen(key, keyPath) {
    },
    handleClose(key, keyPath) {
    }
  },
  data(){
    return{
      admin:'',
      isCollapse: true
    }
  },
  created() {
    let admin=JSON.parse(window.localStorage.getItem('systemAdmin'));
    this.admin=admin
  }
}
</script>

<style scoped>
.home_container{
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
}
.home_header{
  background-color: #3969a3;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.home_title{
  color: #C2C2C2;
  font-size: 22px;
  display: inline;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.home_userinfoContainer{
  display: inline;
  margin-right: 20px;
}
.home_userinfo{
  color: #fff;
  cursor: pointer;
}
.home-footer{
  background-color: #FFFFFF;
  color: #000000;
  font-size: 18px;
  line-height: 60px;
  text-align: center;
}
</style>